<template>
  <a-modal
    :title="!display ? '已拍图片' : '拍照分拣'"
    :width="1200"
    :visible="visible"
    @ok="!display ? hide() : handleOk()"
    @cancel="hide"
    :centered="true"
    :okText="!display ? '确定' : '提交'"
  >

    <el-dialog
      title="图片预览"
      v-if="displayImage"
      width="80%"
      center>
      <a-icon type="close" style="font-size: 30px;float: right;margin-bottom: 6px" @click="displayImage=false"/>
      <img :src="displayImage" style="width: 100%;height: 100%;border-radius: 10px" @click="displayImage=false"/>
    </el-dialog>
    <div style="display: flex;flex-wrap: wrap;justify-content: flex-start" v-if="!display&&!displayImage">
      <div v-show="images==''||images==null">没有已拍图片</div>
      <div v-for="(item,index) in images">
        <div style="width: 320px;height: 240px;margin: 26px;position: relative">
          <img :src="item" alt="" id="img" style="width: 100%;height: 100%;border-radius: 10px" @click="displayImage=item" />
          <div style="background: #cccccc;width: 24px;height: 24px;border-radius: 12px;position: absolute;top: 10px;
             right: 10px;display: flex;justify-content: center;align-items: center" @click="del(index)">
            <a-icon type="close" style="font-size: 20px;color: #ffffff"/>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between" v-show="display&&!displayImage">
      <div style="width: 480px;">
        <div v-if="status==1">摄像头画面加载中...</div>
        <a-button @click="opening" type="primary" style="width: 120px" v-if="!displayButton&&status!=1">开启摄像头</a-button>
        <a-button @click="close" type="primary" style="width: 120px;margin-right: 20px" v-if="displayButton">关闭摄像头</a-button>
        <a-button id="btn" @click="tackcapture" style="width: 60px" v-if="displayButton" type="success">拍照</a-button>
        <section style="margin-top: 20px">
          <video id="video" :width="width" :height="height"></video>
        </section>
        <section v-show="false">
          <canvas id="canvas" :width="width" :height="height"></canvas>
        </section>
      </div>
      <div style="display: flex;flex-wrap: wrap;align-items: flex-start;width: 500px">
        <div v-for="(item,index) in uploadList">
          <div style="width: 224px;height: 168px;margin: 10px;position:relative;">
            <img :src="item" alt="" id="img" style="width: 100%;height: 100%;border-radius: 10px" @click="displayImage=item" />

            <div style="background: #cccccc;width: 24px;height: 24px;border-radius: 12px;position: absolute;top: 10px;
             right: 10px;display: flex;justify-content: center;align-items: center"
                 @click="uploadList.splice(index,1)">
              <a-icon type="close" style="font-size: 20px;color: #ffffff"/>
            </div>
          </div>
        </div>
      </div>
    </div>

  </a-modal>
</template>
<script>
import {
  clothesConfirm,
  clothesOrderEdit,
  imgBase64,
} from '@/api/clothes'
export default {
  props: {
    //已经上传过的图片链接,非空则不需要拍照分拣
    images: {
      type: Array,
      default: () => [],
    },
    display: {
      type: Boolean,
      default: false,
    },
    cid: '',
  },
  data() {
    return {
      visible: false,
      displayButton: false, //拍照按钮展示
      displayImage: false, //图片预览
    /*imageList: [
      'http://browser9.qhimg.com/bdm/960_593_0/t010824ab8b5cdfa138.jpg',
      'http://browser9.qhimg.com/bdm/480_296_0/t01753453b660de14e9.jpg',
      'http://browser9.qhimg.com/bdm/480_296_0/t019fd908f724f51900.jpg',
      'http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg',
      'http://browser9.qhimg.com/bdm/480_296_0/t010448c46c1ecf7cab.jpg',
      'http://browser9.qhimg.com/bdm/480_296_0/t01cd97ec806b712059.jpg',
      'http://browser9.qhimg.com/bdm/960_593_0/t010824ab8b5cdfa138.jpg',
    ],*/
      uploadList: [], //需要上传的分拣图片合集

      status: '',
      video: null,
      convas: null,
      streaming: false,
      img: '',
      btn: '',
      context: '',
      width: '',
      height: '',
      clickStatus: true
    }
  },
  methods: {
    show() {
      this.visible = true;
      //this.imageList = [];
      this.uploadList = [];
      this.status = 1;
      setTimeout(()=>{
        this.opening();
      },100)
    },
    show1(){
      this.visible = true;
    },
    del(i){
      this.$confirm({
        title: '删除提示',
        content: '确认删除这张已拍图片吗?',
        onOk: (() => {
          this.images.splice(i,1)
          const params1 = {
            id: this.cid,
            image: JSON.stringify(this.images)
          }
          clothesOrderEdit(params1).then((res) => {
            this.$message.success('操作成功')
            this.$emit('change')
          })
        })
      })
    },
    hide() {
      this.visible = false;
      this.$emit('change');
      this.close();
    },
    handleOk() {
      if(this.uploadList.length===0){
        this.$message.warn('最少拍摄一张图片才可以提交')
      }else{
        var uploadList = this.uploadList.concat(this.images);
        const params1 = {
          id: this.cid,
          image: JSON.stringify(uploadList)
        }
        clothesOrderEdit(params1).then((res) => {
          this.$message.success('操作成功')
          this.$emit('change')
          this.hide();
        })
      }
    },
    opening () {
      this.convas = document.querySelector('#canvas')
      this.video = document.querySelector('#video')
      this.img = document.querySelector('#img')
      this.btn = document.querySelector('button')
      this.context = canvas.getContext('2d')
      this.width = 640
      this.height = 480
      this.streaming = false // 是否开始捕获媒体
      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
      if (navigator.mediaDevices == undefined) {
        navigator.mediaDevices = {}
      }
      // 获取用户媒体,包含视频和音频
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((stream) => {
          this.video.srcObject = stream // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
          this.video.play() //  播放视频
          this.displayButton = true;
          this.status = 2;
        })
    },
    close() {
      const mediaStream = this.video.srcObject
      const tracks = mediaStream.getTracks()
      tracks.forEach(function(track) {
        track.stop()
      })
      this.video.srcObject = null
      this.displayButton = false;
      this.status = 2;
    },
    tackcapture () {
      if(!this.clickStatus){
        this.$message.warn('请勿过快重复拍摄')
      }else if(this.uploadList.length>8){
        this.$message.warn('最多拍摄九张图片')
      }else{
        this.clickStatus = false;
        // 需要判断媒体流是否就绪
        this.streaming = true // 是否开始捕获媒体
        if (this.streaming) {
          this.context.drawImage(this.video, 0, 0, this.width, this.height) // 将视频画面捕捉后绘制到canvas里面
          //this.imageList.push(canvas.toDataURL('image/png')) // 将canvas的数据传送到img里
          let params = {
            img: canvas.toDataURL('image/png'),
            title: '分拣图片' + (this.uploadList+1),
            type: 'png'
          }
          imgBase64(params).then((res) => {
            this.uploadList.push(res.data.img);
            this.clickStatus = true;
          })
        }

        // 监听视频流就位事件,即视频可以播放了
        this.video.addEventListener(
          'canplay',
          function (ev) {
            if (!this.streaming) {
              //this.height = this.video.videoHeight / (this.video.videoWidth / this.width)

              this.video.setAttribute('width', this.width)
              this.video.setAttribute('height', this.height)
              canvas.setAttribute('width', this.width)
              canvas.setAttribute('height', this.height)
              this.streaming = true;
            }
          },
          false
        )
      }
    }
  },
}
</script>
<style scoped lang="less">
/deep/ .ant-radio-group {
  width: 100%;
}
</style>